<template>
  <div class="AutoReport">
    <el-row :gutter="24" class="partContainer">
      <el-col :span="6">
        <el-row style="margin-left: 10px; font-size: 20px">健康程度</el-row>
        <el-row
          v-if="loadingGetTotalFlag"
          v-loading="loading"
          style="margin-top: 10px; width: 248px; height: 200px"
        />
        <el-row v-else style="margin-top: 10px">
          <piechart
            :id="'part1'"
            :chart-data="part1"
            :width="'100%'"
            :colors="['#16afcc', '#fa4343', '#2F4F4F']"
          />
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-row style="margin-left: 10px; font-size: 20px">用 例 数</el-row>
        <el-row
          v-if="loadingGetTotalFlag"
          v-loading="loading"
          style="margin-top: 10px; width: 248px; height: 200px"
        />
        <el-row v-else style="margin-top: 10px">
          <piechart
            :id="'part2'"
            :chart-data="part2"
            :width="'100%'"
            :colors="['#16afcc', '#fa4343', '#99cc0']"
          />
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row style="margin-left: 10px; font-size: 20px">BUG 排名</el-row>
        <el-row
          v-if="loadingGetTotalFlag"
          v-loading="loading"
          style="margin-top: 10px; width: 519px; height: 200px"
        />
        <el-row v-else style="margin-top: 10px">
          <MixLineChartBug
            :id="'lintData_Bug'"
            :width="'100%'"
            :chart-data="lintData_Bug"
          />
        </el-row>
      </el-col>
    </el-row>
    <!--     <div class="row">
      <div class="col">
        类型:
        <el-select v-model="type" clearable placeholder="请选择">
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="col">
        业务线:
        <el-select v-model="line" clearable placeholder="请选择" @change="selectOne">
          <el-option v-for="item in options" :key="item.group_name" :label="item.group_name" :value="item.group_id" />
        </el-select>
      </div>
      <div class="col">
        项目:
        <el-select v-model="project" clearable placeholder="请选择">
          <el-option v-for="item in projtctOptions" :key="item.projtct_name" :label="item.projtct_name" :value="item.projtct_name" />
        </el-select>
      </div>
      <el-button class="query_btn" @click="handleSearch">查询</el-button>
    </div> -->
    <el-row :gutter="24" style="margin-top: 30px">
      <el-col :span="16">
        <el-row style="margin-left: 10px; font-size: 20px">构建统计</el-row>
        <el-row
          v-if="loadinglowerPartFlag"
          v-loading="loading"
          style="margin-top: 0px; width: 711px; height: 300px"
        />
        <el-row v-else style="margin-top: 0px">
          <MixLineChartBuild
            :id="'lintData_build'"
            :width="'100%'"
            height="300%"
            :chart-data="lintData_build"
            title="构建统计"
          />
        </el-row>
        <el-row style="margin-left: 10px; font-size: 20px">CASE 数量</el-row>
        <el-row
          v-if="loadingGetTotalFlag"
          v-loading="loading"
          style="margin-top: 0px; width: 711px; height: 300px"
        />
        <el-row v-else style="margin-top: 0px">
          <MixLineChartCase
            :id="'lintData_Case_Num'"
            :width="'100%'"
            height="300%"
            :chart-data="lintData_Case_Num"
          />
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row style="margin-left: 10px; font-size: 20px">构建记录</el-row>
        <el-row style="margin-top: 40px">
          <el-table
            class="case_table"
            :data="tableData"
            style="width: 100%"
            align="center"
          >
            <el-table-column prop="date" label="日期" width="180" center />
            <el-table-column
              prop="case_name"
              label="任务名称"
              width="180"
              center
            />
            <el-table-column prop="info" label="查看详情" center>
              <template slot-scope="scope">
                <el-link
                  v-if="scope.row.info.length > 0"
                  :href="scope.row.info"
                  type="info"
                >去看看</el-link>
                <div v-else v-loading="loading" />
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { Message } from 'element-ui'
import piechart from './components/PieChart'
import MixLineChartCase from './components/MixLineChart'
import MixLineChartBug from './components/MixLineChart'
import MixLineChartBuild from './components/MixLineChart'
import {
  queryreport,
  gettotal,
  lowerPart,
  reportTop
} from '@/api/report'
export default {
  components: {
    piechart,
    // eslint-disable-next-line vue/no-unused-components
    MixLineChartCase,
    // eslint-disable-next-line vue/no-unused-components
    MixLineChartBug,
    // eslint-disable-next-line no-undef
    MixLineChartBuild
  },
  // props: {},
  data() {
    return {
      options: [],
      projtctOptions: [],
      typeOptions: [
        { value: 1, label: 'WEB_UI自动化' },
        { value: 2, label: 'APP_UI自动化' },
        { value: 3, label: '接口自动化' }
      ],
      type: '',
      line: '',
      project: '',
      part1: [],
      part2: [],
      part3: [],
      part4: [],
      lintData_build: [],
      lintData: [],
      lintData_Bug: [],
      lintData_Case_Num: [],
      tableData: [],
      loading: true,
      loadinglowerPartFlag: false,
      loadingGetTotalFlag: false
    }
  },
  created() {
    // this.getGroupName();
    // this.getDate()
    this.getDateTotal()
    this.LowerPart()
    this.ReportTop()
  },
  methods: {
    See(e) {
      window.open(e)
    },
    LowerPart() {
      lowerPart()
        .then((res) => {
          this._data.lintData_build = res.data
        })
        .catch((err) => {
          Message.error(err.msg || err.message || err.value)
          this.loadinglowerPartFlag = true
          this.lowerPart()
        })
    },
    ReportTop() {
      reportTop()
        .then((res) => {
          this._data.tableData = res.data
        })
        .catch((err) => {
          Message.error(err.msg || err.message || err.value)
        })
    },
    getDate() {
      const { type, line, project } = this._data
      queryreport({
        case_type: type || '',
        group_name: line || '',
        project_name: project || ''
      })
        .then((res) => {
          this._data.lintData = res.data
        })
        .catch((err) => {
          Message.error(err.msg || err.message || err.value)
        })
    },
    getDateTotal() {
      const { type, line, project } = this._data
      gettotal({
        group_name: line || '',
        project_name: project || '',
        case_type: type || ''
      })
        .then((res) => {
          this._data.part1 = res.data.healthy
          this._data.part2 = res.data.implement
          this._data.lintData_Case_Num = res.data.total
          this._data.lintData_Bug = res.data.bugsort
        })
        .catch((err) => {
          Message.error(err.msg || err.message || err.value)
          this.loadingGetTotalFlag = true
          this.getDateTotal()
        })
    },
    handleSearch() {
      this.getDate()
    }
  }
}
</script>
<style>
.el-main {
  /*background-color: #eeeeee;*/
  line-height: 14px;
}

.AutoReport {
  width: 95%;
  height: 100%;
  margin: 40px 30px;
  position: relative;
  background-color: #ffffff;
}

.partContainer .centerWord {
    color: rgba(255, 42, 35, 0.96);
  }

.row {
  display: flex;
  height: 48px;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin-top: 30px;
}

.row > .col {
  display: flex;
  min-width: 200px;
  align-items: center;
}

.query_btn {
  margin-right: 20%;
  color: #3888fa;
}

.case_table {
  margin-top: 0px;
}

.bug_ranking {
  height: 50px;
}
</style>
